<template>
	<view class="page mine-edit">
		<nav-bar back>个人资料</nav-bar>
		<view :is-shadow="false" is-full :border="false" class="main">
			<uni-forms ref="form" :modelValue="userInfo" label-position="top" label-width="100%">
				<view class="item-avatar">
					<text>头像</text>
					<uni-forms-item name="headImage" class="avatar">
						<image-upload :onSuccess="onUnloadImageSuccess">
							<view style="display: flex;align-items: center;">
								<image :src="userInfo.headImageThumb?userInfo.headImageThumb:'/static/image/pic.jpg'"
									style="width: 70rpx;height: 70rpx;border-radius: 5rpx;" class="head-image">
								</image>&nbsp;
								<uni-icons class="arrow" type="right" color="#b3b3b3" size="16"></uni-icons>
							</view>
						</image-upload>
					</uni-forms-item>
				</view>
				<!-- <view class="item">
					<text>用户名</text>
					<input :value="userInfo.userName" type="text" disabled/>
				</view> -->
				<arrow-bar title="名字" :right="userInfo.nickName" @click="
				uni.navigateTo({
					url: `/pages/mine/edit-item?type=更改名字`
				})"></arrow-bar>
				<arrow-bar title="性别" :right="userInfo.sex === 0?'男':'女'" @click="
				uni.navigateTo({
					url: `/pages/mine/edit-item?type=设置性别`
				})"></arrow-bar>
				<arrow-bar title="签名" :right="userInfo.signature||'未填写'" @click="
				uni.navigateTo({
					url: `/pages/mine/edit-item?type=个性签名`
				})"></arrow-bar>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		methods: {
			onSexchange(e) {
				this.userInfo.sex = e.detail.value;
			},
			onUnloadImageSuccess(file, res) {
				this.userInfo.headImage = res.data.originUrl;
				this.userInfo.headImageThumb = res.data.thumbUrl;
			},
			onSubmit() {
				this.$http({
					url: "/user/update",
					method: "PUT",
					data: this.userInfo
				}).then(() => {
					this.userStore.setUserInfo(this.userInfo);
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				})
			}
		},
		onShow() {
			this.userInfo = this.userStore.userInfo;
		}
	}
</script>

<style scoped lang="scss">
	.mine-edit {
		.title {
			button {
				position: absolute;
				color: #fff;
				background-color: #07c160;
				right: 20rpx;
				bottom: 10rpx;
				padding: 0;
				font-size: 30rpx !important;
				width: 120rpx;
				line-height: 60rpx;
			}
		}

		.main {

			// padding: 20rpx;
			.item-avatar {
				position: relative;
				background-color: #fff;
				padding: 30rpx 40rpx;

				.avatar {
					position: absolute;
					top: -55rpx;
					right: 40rpx;
				}
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx;
				background-color: #fff;
				margin-bottom: 1rpx;
				text-align: right;

				view:last-child {
					width: 500rpx;
				}

				radio-group {
					width: 500rpx;
				}


				input {
					text-align: right;
					width: 500rpx;
					color: #afafaf;
					// text-align: center;
				}

				.head-image {
					width: 100rpx;
					height: 100rpx;
				}

			}

			.item:first-child {
				padding: 0rpx 40rpx;
			}
		}
	}
</style>